<template>
    <div class="power-menu">
        <a-checkbox v-model:checked="state.checked" @change="changeMenu">
            {{ list.name }}
        </a-checkbox>
    </div>
    <div class="power-children">
        <a-checkbox-group v-model:value="state.ids">
            <a-checkbox :value="child.id" v-for="child in list.children" :key="child.id" @change="changeChild">{{ child.name }}</a-checkbox>
        </a-checkbox-group>
    </div>
    <div @click="getChecked">test</div>
</template>
<script setup>
import { onMounted, reactive } from 'vue';
const props = defineProps({
    list: {
        type: Object,
        default: () => ({})
    }
})

const state = reactive({
    ids: [],
    checked: false
})

/**
 * 菜单级
 */
const changeMenu = (e) => {
    const checked = e.target.checked
    if(!checked) {
        state.ids = []
    }
}
/**
 * 子级
 */
const changeChild = (e) => {
    const checked = e.target.checked
    if(checked && !state.checked) {
        state.checked = true
    }
}
/**
 * 获取数据
 */
const getChecked = () => {
    // 初始值
    let ids = []
    ids = state.ids 
    // 判断不存在的时候
    if(state.checked && !ids.includes(props.list.id)) {
        ids.push(props.list.id)
    }
    return ids
}
onMounted(() => {
    state.checked = props.list.is_checked
    
    const chldren = props.list.children
    if(chldren && chldren.length) {
        const ids = chldren.filter(item => item.is_checked).map(el => el.id)
        state.ids = ids
    }
})
/** 暴露子组件的方法 */
defineExpose({
    getChecked
})
</script>
<style lang="scss" scoped>
.power-menu {
    margin-left: 20px;
    margin-bottom: 20px;
}
.power-children {
    margin-left: 46px;
    margin-bottom: 38px;
}
</style>